<template>
	<view class="bg vh-100">
		<view :style="`padding-top:${height}px;`" class="pl-24">
			<text class="text-white text-white fw-600 fs-20">艺术二维码</text>
		</view>
		<view class="mt-8 flex flex-column grid-gap-15 px-15">
			<view class="py-15 flex" @click="openUser">
				<image :src="USERINFO.avatar" class="w-60 h-60 round-circle"></image>
				<view class="flex flex-column ml-8 flex-x-center">
					<text class="fs-17 text-white">{{USERINFO.nickname}}</text>
					<text class="fs-15 text-999 pt-6">ID:{{USERINFO.id}}</text>
				</view>
			</view>

			<view class="round-8  flex flex-x-space-between flex-y-center py-11 fw-600 pl-16 pr-11 box text-4C">
				<view class="flex flex-column">
					<text class="fs-17 ">艺术二维码</text>
					<text class="fs-12  pt-4 fw-500">{{USERINFO?.points}}</text>
				</view>
				<view class="flex flex-y-center" @click="$page.open('/pages/package/index')">
					<text class="fs-14">快速充值</text>
					<view class="ml-4 iconfont icon-xiangyou text-4C fs-10"></view>
				</view>
			</view>

			<view class="bg-black-1  round-8 text-white fs-15 ">
				<view class="px-20 py-15 flex flex-x-space-between flex-y-center  item" @click="to(item)"
					v-for="(item,index) in menuList" :key='index'>
					<view class="flex flex-y-center">
						<image :src="item.icon" class="w-24 h-24"></image>
						<text class="ml-8">{{item.name}}</text>
					</view>
					<view class="icon-xiangyou iconfont fs-15 text-999"></view>
				</view>

			</view>



			<view class="bg-black-1  round-8 text-white fs-15 ">
				<view class="px-20 py-15 flex flex-x-space-between flex-y-center  item" @click="to(item)"
					v-for="(item,index) in menuList1" :key='index'>
					<view class="flex flex-y-center">
						<image :src="item.icon" class="w-24 h-24"></image>
						<text class="ml-8">{{item.name}}</text>
					</view>
					<view class="icon-xiangyou iconfont fs-15 text-999"></view>
				</view>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view v-if="WEBCONFIG?.weixin_video_status && WEBCONFIG?.weixin_video_status == 1">
			<ad :unit-id="WEBCONFIG?.weixin_video_ad_id" ad-theme="white"></ad>
		</view>
		<!-- #endif -->

		<y-popup round='8' ref='popupCustomer'>
			<view class="bg-white p-20 flex flex-column flex-y-center grid-gap-6">
				<image :src="WEBCONFIG?.web_logo" class="w-60 h-60 round-circle"></image>
				<text class="fs-18 fw-bold">{{WEBCONFIG?.web_name}}</text>
				<view class="border-grey p-4 round-6" style="border-style: dashed;">
					<image :src="WEBCONFIG?.customer_qrcode" class="vw-60" mode="widthFix" show-menu-by-longpress>
					</image>
				</view>
				<text class="fs-12 text-999">长按保存图片</text>
			</view>
		</y-popup>


		<y-popup ref="userPopup" mode="bottom" round="10">
			<y-user @close="userClose" />
		</y-popup>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { $page, $http,$tool } from '@/utils'
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const { USERINFO } = useRefs(useUserStore())
	import system from "@/utils/system.js";
	const height = ref(8)
	const popupCustomer = ref()
	const userPopup = ref()
	const menuList = reactive([
		{ name: '每日任务', path: '/pages/task/index', icon: '/static/icon/mrrw.png' },
		{ name: '资金明细', path: '/pages/user/capital', icon: '/static/icon/symx.png' },
	])
	const menuList1 = reactive([
		{ name: '创作记录', path: '/pages/works/index', icon: '/static/icon/czjl.png' },
		{ name: '学院中心', path: '/pages/article/list', icon: '/static/icon/xyzx.png' },
		{ name: '卡密兑换', path: '', icon: '/static/icon/kmdh.png' },
		{ name: '在线客服', path: '', icon: '/static/icon/lxkf.png' },
	])
	onLoad(() => {
		height.value += uni.getSystemInfoSync().statusBarHeight
	})
	onShow(() => {
		getUser()
		
		// #ifdef H5
		$tool.replaceUrlParam('appid', system.appid());
		let user_id = USERINFO.value?.id
		if (user_id) {
			$tool.replaceUrlParam('user_id', user_id)
		}
		// #endif
	})
	const getUser = () => {
		const { setUserInfo, isLogin } = useUserStore()
		if (isLogin()) {
			$http.get('User/getUser').then(res => {
				setUserInfo(res.data)
			})
		} else {
			uni.showModal({
				title: '温馨提示',
				content: '请先登录',
				success(res) {
					if (res.confirm) {
						$page.open('/pages/user/login')
					}
				}
			})
		}
	}
	const userClose = () => {
		getUser()
		userPopup.value.close()
	}

	const to = (e) => {
		if (e.name == "在线客服") {
			openCustomer()
			return;
		}
		console.log(e.name)
		if (e.name == '每日任务' || e.name == '创作记录') {
			$page.switch(e.path);
			return;
		}

		if (e.name == '卡密兑换') {
			uni.showModal({
				title: '卡密兑换',
				placeholderText: '请输入卡密值',
				editable: true,
				success(res) {
					if (res.confirm) {
						if (res.content == '') {
							$tool.toast('请输入卡密值')
						} else {
							$http.post('Cdkey/cdkey', { code: res.content }).then(res => {
								$tool.toast('兑换成功')
								getUser()
							})
						}
					}
				}
			})
			return;
		}
		$page.open(e.path)
	}

	const openUser = () => {
		userPopup.value.open()
	}

	const openCustomer = () => {
		// #ifdef H5
		if (WEBCONFIG.value.customer_status == '1') {
			popupCustomer.value.open()
		} else {
			window.location.href = WEBCONFIG.value.official_customer_url
		}
		return
		// #endif
		// #ifdef MP-WEIXIN
		if (WEBCONFIG.value.customer_status == '1') {
			popupCustomer.value.open()
		} else {
			wx.openCustomerServiceChat({
				extInfo: {
					url: WEBCONFIG.value.customer_url
				},
				corpId: WEBCONFIG.value.customer_corpId, //必须和你小程序上的一致
				success(res) {
					console.log(res, 1)
				},
				fail(res) {
					console.log(res, 2)
				},
			})
		}
		// #endif
	}
</script>

<style>
	.box {
		background: linear-gradient(to right, #feeed8, #fdd9a6);
	}


	.bg {
		background: radial-gradient(circle at -30% -20%, #273c55 0%, transparent 45%);
		background-repeat: no-repeat;
		background-position: top left;
		/* #ifdef H5 */
		background-attachment: fixed;
		/* #endif */
	}

	.item:not(:last-child) {
		border-bottom: 2rpx solid #313131;
	}
</style>